<template>
	<view class="io-popup-overlay" v-show="visible" @tap.stop="onClickOverlay">
		<view class="io-popup-popup io-popup-popup--safebottom">
			<slot v-if="useSlots().header" name="header"></slot>
			<view v-else class="io-popup-popup-header">
				<view class="io-popup-popup-header-title">{{ title }}</view>
				<image class="io-popup-popup-header-close" src="@/static/close.png" @tap.stop="onClickCloseIcon()" />
			</view>
			<slot></slot>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import { useSlots, } from 'vue';
	const props = defineProps({
		visible: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: '标题',
		},
		maskClosable: {
			type: Boolean,
			default: false,
		},
	})
	const emits = defineEmits(['update:visible', 'close']);

	const onClickOverlay = () => {
		if (props.maskClosable) {
			emits('update:visible', false);
			emits('close');
		}
	}
	const onClickCloseIcon = () => {
		emits('update:visible', false);
		emits('close');
	}
</script>
<style lang="scss">
	.io-popup {
		&-overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba($color: #000000, $alpha: 0.5);
		}

		@keyframes bottomToTop {
			0% {
				transform: translateY(100%);
				opacity: 0;
			}

			100% {
				transform: translateY(0);
				opacity: 1;
			}
		}

		&-popup {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			min-height: 200px;
			background-color: #ffffff;
			border-radius: var(--border-radius) var(--border-radius) 0 0;
			animation: bottomToTop 0.2s ease-out;
			padding: var(--page-padding);
			box-sizing: border-box;

			&--safebottom {
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
			}

			&-header {
				display: flex;
				flex-direction: row;
				text-align: center;
				padding-top: 1px;
				align-items: center;
				font-size: 16px;
				line-height: 2.5;

				&-title {
					margin-left: 40px;
					color: var(--text-color);
					font-weight: bold;
					margin: auto;
				}

				&-close {
					cursor: pointer;
					width: 30px;
					height: 30px;
				}
			}
		}
	}
</style>